<template>
  <div class="evaluation-container">
    <userHeader/>
    <div class="breadClum">
      <span>
          <router-link :to="{path:'/pageIndex'}"><a class="bread1">当前位置：首页  >  </a></router-link>
          <router-link :to="{path:'/comment'}"><a class="bread2">内控评价 ></a></router-link>
          <a class="bread2">编辑评价报告</a>
      </span>
    </div>
    <el-table
      v-loading="loading"
      :row-class-name="tableRowClassName"
      :data="tableData3"
      :cell-class-name="cell"
      stripe
      ref="dataListTable"
      style="width: 100%">
      <el-table-column
        label="序号"
        type="index"
        width="70">
      </el-table-column>
      <el-table-column
        prop="evaplan_type_name"
        label="评价计划"
        width="320">
      </el-table-column>
      <el-table-column
        label="报告模板"
        width="340"
      >
        <template slot-scope="scope">
          <a :href="scope.row.template_link" :download="scope.row.template_link">{{scope.row.template_name}}</a>
        </template>
      </el-table-column>

      <el-table-column
        label="报告上传"
        width="168"
      >
        <template slot-scope="scope">
          <!--<el-upload-->
          <!--class='image-uploader'-->
          <!--list-type='text'-->
          <!--:limit="1"-->
          <!--:data="scope.row"-->
          <!--name="up_file"-->
          <!--action="/api/v1/flow/uploadedfile"-->
          <!--:headers="headers"-->
          <!--:on-success=" (res,file,filelist)=>{ return uploadSuccess(res,file,filelist,scope.$index)}"-->
          <!--:show-file-list=false-->
          <!--@click="upload(scope.$index)"-->
          <!--&gt;-->
          <!--<el-tag><i class="el-icon-upload el-icon&#45;&#45;right"></i>选择文件</el-tag>-->
          <!--</el-upload>-->
          <el-upload
            v-if="!scope.row.file_id"
            class="image-uploader"
            list-type='text'
            name="report_file"
            action="/api/v1/flow/evaluationreportupload"
            :headers="headers"
            :limit="1"
            :on-success=" (res,file,filelist)=>{ return uploadSuccess(res,file,filelist,scope.$index)}"
          >
            <a>点击上传</a>{{scope.row.file_id}}
          </el-upload>
          <a  v-if="scope.row.file_id">{{scope.row.file_name}}</a>
        </template>
      </el-table-column>
      <el-table-column
      >

      </el-table-column>

    </el-table>

    <el-pagination
      :page-count=pageSize
      layout="total,prev, pager, next, jumper"
      :current-page.sync="currentPage"
      @current-change="currentChange"
    >
    </el-pagination>
  </div>
</template>
<script>
  import userHeader from '@/components/header.vue'
  import {
    strToHexCharCode,
    toFixedBit,
    dec2hex,
    formatTime,
    getNewDate
  } from "@/utils/index.js";
  var mdSecret = "fangyou968123456";

  export default ({
    data() {
      return {
        tableData3: [],
        page:1,
        pageSize:1,
        total:0,
        currentPage:1,
        pageCount:0,
        loading:false,
        upLoadData: {},
        headers: {},
      }
    },
    components: {
      userHeader,
    },
    computed: {},
    methods:{
      uploadSuccess(response, file, fileList, index) {
        console.log(index);
        console.log(response);
        if (response.code == 0) {
          this.tableData3[index].file_id= response.data.file_id;
          this.tableData3[index].file_name = response.data.report_name;
          console.log(response.data.file_name);
          this.axios.post('/api/v1/flow/evaluationreportredact',{
            evaplan_type_id:this.tableData3[index].evaplan_type_id,
            report_name:response.data.report_name,
            file_path:response.data.file_path
          })
            .then((res)=>{
              console.log(res.data)
            })
        }else{
            this.$alert(response.message)
        }
        console.log("上传文件", response);
      },
      //树状结构分类
      tableRowClassName ({row, rowIndex}) {
        //把每一行的索引放进row
        row.index = rowIndex;
      },
      //分页状态改变
      currentChange(val){
        this.page =val;
        this.loading =true;
        this.initData(this.page)
      },
      cell({row, column, rowIndex, columnIndex}) {
        //第八列添加 red 类
        if(columnIndex==3){
          return "belong-company"
        }
        if(columnIndex==2){
          return "e-template"
        }
      },
      initData(page){
        this.axios.get('/api/v1/flow/evaluationreportredact',{
          params:{
            limit:10,
            page:page
          }
        }).then((res)=>{
          if(res.data.code==0){
            this.tableData3 =res.data.data;
            this.loading =false;
            this.pageSize =res.data.pagination.pages
            this.currentPage=res.data.pagination.page
          }
        })
      }
    },
    mounted(){
      this.initData(this.page);
    },
    created(){
      //文件上传的辅助信息 ********
      var currentTime = parseInt(
        getNewDate(formatTime(new Date())).getTime() / 1000
      );
      this.headers = {
        token: toFixedBit(
          strToHexCharCode(`${mdSecret}${currentTime}`),
          52,
          true,
          0,
          true
        ),
        timeStamp: currentTime,
        sign: this.MD5(
          `${sessionStorage.getItem("user_name")}${sessionStorage.getItem(
            "token"
          )}${currentTime}`
        )
      };//**************
    }
  })
</script>
<style scoped>
  .edit-container{
    padding:14px 10px 32px;
  }
  .edit-header{
    padding-bottom:12px;
    border-bottom:1px solid #eee;
  }
  .evaluation-container .container  .el-dialog .el-form ul{
    height: 660px;
    overflow-y: scroll;
  }
  .evaluation-container{
    width: 100%;
    height: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px;
    background-color: white;
  }
  .evaluation-container >>> .el-table th.is-leaf {
    background: #d3e9bb;
    height: 58px;
  }
  .evaluation-container >>> .el-table .e-template a{
    color: #333;
  }
  .evaluation-container >>> .el-table .belong-company .image-uploader a{
    text-decoration: underline;
    color:#8bc34a;
    padding-bottom: 2px;
  }
  .evaluation-container >>> .el-table .belong-company .image-uploader  .el-upload-list,
  .evaluation-container >>> .el-table .belong-company .image-uploader .el-upload{
    /*display: inline-block;*/
    /*vertical-align: top;*/
  }
  .evaluation-container >>> .el-table .belong-company .image-uploader  .el-upload-list{
    /*width: 100px;*/
    /*overflow: hidden;*/
  }
  @media screen and (max-width: 1400px) {
    .evaluation-container{
      padding: 6px;
    }
  }
</style>
